<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="ctx" value="<%=basePath %>"/>
<c:set var="js" value="${ctx}/static/js"/>
<c:set var="css" value="${ctx}/static/css"/>
<c:set var="img" value="${ctx}/static/images"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=yes" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">

    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="${css}/app/common.css">
    <link rel="stylesheet" type="text/css" href="${css}/app/detail.css">
    <script type="text/javascript" src="${js}/easyui1.4.1/jquery.min.js?version=${jsVersion}"></script>
    <script type="text/javascript" src="${js}/config.js"></script>
</head>
<body style="background: #F4F4F4">
<div class="detail">
    <div class="user_box">
        <div class="user_img">
            <img src="${circle.user.pic}">
        </div>
        <div class="name_time">
            <h2>${circle.user.nick}</h2>
            <p class="J_createTime">${circle.time}</p>
        </div>
    </div>
    <c:if test="${not empty images}">
        <div class="user_show_img">
            <ul>
                <c:forEach var="image" items="${images}">
                    <li><img src="${image}"></li>
                </c:forEach>
            </ul>
        </div>
    </c:if>

    <%-- TODO 轨迹 --%>
    <c:if test="${not empty circle.path}">
        <div class="user_walk">
            <div class="walk_img">
                    <%-- todo 轨迹缩略图 --%>
                <img src="./img/user.png">
            </div>
            <div class="walk_detail">
                <div class="walk_detail_item pt10">
                    <p class="c_4e4e4e text-1">${circle.path.name}武汉洪山2017-03-02</p>
                    <span class="tags">轨迹</span>
                </div>
                <div class="walk_detail_item">
                    <p class="bx"><i></i>
                        <c:choose>
                            <c:when test="${circle.path.type == 1}">骑行</c:when>
                            <c:when test="${circle.path.type == 2}">跑步</c:when>
                            <c:when test="${circle.path.type == 3}">徒步</c:when>
                            <c:when test="${circle.path.type == 4}">滑雪</c:when>
                            <c:when test="${circle.path.type == 5}">游泳</c:when>
                            <c:when test="${circle.path.type == 6}">室内训练</c:when>
                            <c:when test="${circle.path.type == 7}">自由行</c:when>
                        </c:choose>
                    </p>
                </div>
                <div class="walk_detail_item">
                    <p class="jl"><i></i>${circle.path.height}m</p>
                    <span class="time"><i></i>${circle.path.timeStr}</span>
                </div>
            </div>
            <div class="line"></div>
        </div>
    </c:if>


    <div class="user_address">
        <div class="address">
            <i></i>
            <span>${circle.address}</span>
        </div>
        <div class="plun">
            <i></i>
            <span>${circle.likeCount}</span>
        </div>
        <div class="dzan">
            <i></i>
            <span>${circle.commentCount}</span>
        </div>
    </div>

    <div class="comment_box">
        <div class="comment_top">
            <h2>${circle.likeCount}人点赞</h2>
            <div class="dzan_list">
                <ul>
                    <c:forEach items="${likeList}" var="like">
                        <li><img src="${like.pic}" alt=""></li>
                    </c:forEach>
                    <li>
                        <a href="javascript:void(0)" class="more_user"></a>
                    </li>
                </ul>
            </div>
        </div>

        <c:if test="${not empty commentList}">
            <div class="comment_content">
                <ul>
                    <c:forEach items="${commentList}" var="comment">
                        <li>
                            <h2>${circle.commentCount}条评论</h2>
                            <div class="comment_item">
                                <div class="user_img">
                                    <img src="${comment.pic}">
                                </div>
                                <div class="user_info">
                                    <div class="left">
                                        <p class="name text-1">${comment.nick}</p>
                                        <p class="time">${comment.time}</p>
                                    </div>
                                    <div class="right">
                                        <i></i>
                                    </div>
                                </div>
                                <c:if test="${empty comment.replyedid}">
                                    <div class="comment_hf">
                                        <p>${comment.content}</p>
                                    </div>
                                </c:if>
                                <c:if test="${not empty comment.replyedid}">
                                    <div class="comment_hf">
                                        <p>回复<span>${comment.replyedNick}</span>:${comment.content}</p>
                                    </div>
                                </c:if>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </c:if>
    </div>
</div>
</body>
</html>